<script setup>
import { ref, inject, onMounted } from 'vue'
import Vrouter from "@/router"
import isToken from '@/utils/token/token.js'
import { MYURL } from '@/utils/express/express.js'
import { get_user_profile } from '@/api/user/user.js'
import { userStore } from '@/stores/user.js'
const MyStore = userStore()

const tag_nav_title = ref(null)
// nextTick(() => {
//    chatNum.value = 
// })
let startposition, swiperContainerposition
const router = Vrouter
const go_search = () => {
   router.push({ path: 'search' })
}
const isLogin = ref(false)
if (isToken()) {
   isLogin.value = true
   get_user_profile().then((res) => {
      // console.log(res.data.mes);
      profileImg.value = `${MYURL}/public/profiles/${res.data.mes[0].profile}`
   })
} else {
   isLogin.value = false
}
const profileImg = ref(null)
const go_my = () => {
   const router = Vrouter
   if (!isToken()) return router.push({ path: 'login' })
   router.push({ path: 'my' })
}
const change_icon = inject('change_icon')
onMounted(() => {
   change_icon(0, 'video')
})

const movestart = (e) => {
   startposition = parseInt(e.changedTouches[0].clientX),
      swiperContainerposition = tag_nav_title.value.offsetLeft
}
const moving = (e) => {
   let realposition = (e.changedTouches[0].clientX - startposition)
   if (tag_nav_title.value.offsetLeft <= 0 && tag_nav_title.value.offsetLeft <= -(tag_nav_title.value.clientWidth) * 0.2) {
      if (realposition >= 0) {
         tag_nav_title.value.style.left = `${swiperContainerposition + realposition}px`
      }
   } else if (tag_nav_title.value.offsetLeft > 2) {
      if (realposition <= 0) {
         tag_nav_title.value.style.left = `${swiperContainerposition + realposition}px`
      }
   } else {
      tag_nav_title.value.style.left = `${swiperContainerposition + realposition}px`
   }
}
const getback = () => {
   const router = Vrouter
   router.push({ path: 'classify' })
}
</script>

<template>
   <div class="place-hoder" style="z-index: 100;">
      <div class="top-nav">
         <img class="polite" v-if="isLogin" @click="go_my" :src="profileImg">
         <p v-if="!isLogin" class="no-login" @click="go_my">登录</p>
         <div class="top-nav-search" @click="go_search">
            <img src="@/assets/img/search.png">
            <p>佛山电焊</p>
         </div>
         <div class="top-nav-game">
            <img @click="router.push('/empty')" src="@/assets/img/game.png">
            <div class="chat-num">
               <img src="@/assets/img/letter.png" @click="router.push('/chatList')">
               <p v-show="MyStore.initChatNMum" class="num">
               {{ MyStore.initChatNMum >= 100 ? '99' :MyStore.initChatNMum }}</p>
            </div>
         </div>
      </div>
      <div style="height: 10px;background-color: white;"></div>
      <div class="tag-nav">
         <div ref="tag_nav_title" @touchstart.passive="movestart" @touchmove.passive="moving" class="tag-nav-title">
            <router-link to="/live">直播</router-link>
            <router-link to="/myrecpmmend">推荐</router-link>
            <router-link to="/hot">热门</router-link>
            <router-link to="/cartoon">动画</router-link>
            <router-link to="/movie">影视</router-link>
            <router-link to="/Party">新征程</router-link>
         </div>
         <div class="tag-nav-right">
            <img src="@/assets/img/tag-table.png" @click="getback">
         </div>
      </div>
   </div>
   <div class="Main">
      <RouterView />
   </div>
</template>

<style scoped lang="less">
.place-hoder {
   position: sticky;
   top: 0;
   left: 0;
}

.top-nav {
   background-color: white;
   // margin-top: 10px;
   padding-top: 10px;
   width: 100%;
   display: flex;
   align-items: center;

   img {
      width: 30px;
      height: 30px;
   }

   .no-login {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(0, 0, 0, 0.04);
      font-weight: 600;
      font-size: 14px;
      color: var(--bilibili-pink);
      margin-left: 2%;
      width: 40px;
      height: 40px;
      border-radius: 50%;

   }

   .polite {
      width: 40px;
      height: 40px;
      margin-left: 2%;
      border-radius: 50%;
   }

   .top-nav-search {
      margin-left: 3%;
      display: flex;
      align-items: center;
      width: 60%;
      border: 1px #95999f solid;
      border-radius: 20px;


      img {
         margin-left: 2%;
         width: 15px;
         object-fit: contain;
      }

      p {
         font-size: 12px;
         margin-left: 2%;
         color: #6b6f75;
      }
   }

   .top-nav-game {
      width: 20%;
      display: flex;
      justify-content: center;
      margin-left: auto;
      gap: 10px;
   }
}

.tag-nav {
   background-color: white;
   overflow: hidden;
   position: relative;
   color: #62666c;
   padding-bottom: 5px;
}

.tag-nav-title {
   width: 100%;
   position: relative;
   display: flex;
   justify-content: space-around;

   p {
      transition: all 1s;
   }
}

.tag-nav-right {
   position: absolute;
   right: 2%;
   top: 10%;
   // top: 50%;
   // transform: translate(0,-50%);
   height: 100%;
   background-color: white;

   img {
      width: 25px;
   }
}

.tag-nav-right::before {
   display: block;
   content: '';
   background-color: rgb(255, 255, 255);
   height: 100%;
   width: 50%;
   filter: blur(5px);
   position: absolute;
   transform: translate(-53%, 0);
}

.tag-nav-right::after {
   display: block;
   content: '';
   background-color: rgb(255, 255, 255);
   height: 100%;
   width: 50%;
   position: absolute;
   top: 0;
   right: -50%;
}


.router-link-active {
   color: #ed7098;
   font-weight: 600;
   // font-size: 17px;
   translate: all 1s;
}

.chat-num {
   position: relative;


   .num {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      font-size: 10px;
      height: 15px;
      width: 15px;
      top: 0;
      right: 0;
      color: white;
      background-color: #e7564f;
      border-radius: 50%;
   }
}
</style>
